<template>
  <borderBox6 :style="style">
    <div class="data-table" style="padding: 10px">
      <el-table :data="data" :header-cell-style="headerCell" :header-row-style="cellStyle" :row-style="cellStyle" :cell-style="cellStyle" size="small" :border="false">
        <el-table-column align="center" v-for="item in columns" :width="item.width" :key="item.key" :prop="item.dataIndex" :label="item.title">
          <template #default="scope" v-if="item.dataIndex === 'rank' || item.dataIndex === 'amount' || item.dataIndex === 'time'">
            <span style="color:#CAB21F">{{ scope.row[item.dataIndex] }}</span>
          </template>
          <template #default="scope" v-else>
            {{ scope.row[item.dataIndex] }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </borderBox6>
</template>
<script setup>
import Content from './content.vue'
import borderBox6 from './borderBox6/index.vue'
const props = defineProps({
  data:{
    type:Array,
    default:()=>[]
  },
  columns:{
    type:Array,
    default:()=>[]
  },
  style:{
    type:Object,
    default:()=>{}
  }
})
const headerCell = ({row, column, rowIndex, columnIndex}) => {
  if(column.label === '排名' || column.label === '金额' || column.label === '下单时间'){
    return{
      color: '#CAB21F',
      backgroundColor: '#072c52',
      border: "transparent !important",
    }
  }
  return {  
    color: 'white',
    backgroundColor: '#072c52',
    borderColor: "transparent !important",
  }
}

const cellStyle = { backgroundColor: '#072c52', borderColor: "transparent !important"}
</script>
<style scoped>
:deep(.el-table__cell){
  background-color: transparent;
  border-color: transparent !important;
  color: white;
}
:deep(.el-table__inner-wrapper:before){
  background-color: transparent !important;
}
.scroll{
  min-height: 300px;
}
</style>
